<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 菜单 筛选区【列表】-->
      <el-form ref="form"
               label-width="80px"
               :inline="true"
               size="medium">
        <el-row>
          <el-col :span="18">
            <el-form-item>
              <el-input size="medium"
                        placeholder="管理员邮箱"
                        v-model="fromData.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input size="medium"
                        placeholder="管理员姓名"
                        v-model="fromData.username"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="fromData.status"
                         placeholder="请选择活动区域">
                <!-- <el-option label="全部"
                           value="1"></el-option>
                <el-option label="启用"
                           value="2"></el-option>
                <el-option label="禁用"
                           value="3"></el-option> -->
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         size="medium"
                         plain
                         @click="initData(true)">
                搜索</el-button>
              <el-button size="medium"
                         @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  :push="4">
            <el-form-item>
              <el-button type="primary"
                         size="medium"
                         plain
                         @click="$refs.AddUser.dialogShow = true">创建用户</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格区域 -->
      <el-table border
                stripe
                style="width: 100%"
                :data="list">
        <el-table-column prop="id"
                         label="管理员ID"
                         width="100px">
        </el-table-column>
        <el-table-column prop="username"
                         label="管理员姓名"> </el-table-column>
        <el-table-column prop="phone"
                         label="手机号"> </el-table-column>
        <el-table-column prop="email"
                         label="管理员邮箱"
                         width="200px">
        </el-table-column>
        <el-table-column prop="avatar"
                         label="管理员头像">
          <template slot-scope="{ row }">
            <el-image style="width: 100px; height: 100px"
                      :src="http + row.avatar"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="role_name_str"
                         label="管理员角色">
          <template slot-scope="{ row }">
            <el-tag type="success">{{ row.role_name_str }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at"
                         label="添加时间"
                         width="220px">
        </el-table-column>
        <el-table-column prop="status"
                         label="状态">
          <template slot-scope="{ row }">
            <el-switch v-model="row.status"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       active-value="1"
                       inactive-value="2">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="prop"
                         label="操作">
          <template slot-scope="{ row }">
            <el-button type="primary"
                       size="mini"
                       icon="el-icon-edit"
                       circle
                       @click="edlFn(row.id)"></el-button>
            <el-button size="mini"
                       type="danger"
                       icon="el-icon-delete"
                       circle
                       @click="delFn(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination @size-change="sizeChange"
                     @current-change="currentChange"
                     :page-sizes="[10, 20, 30]"
                     :page-size="fromData.limit"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="totalNum"
                     background>
      </el-pagination>
      <AddUser ref="AddUser"
               @updated="initData"></AddUser>
    </div>
  </div>
</template>

<script>
import {
  getUserListApi,
  getUserCheckListApi,
  showUserCheckListApi,
  delUserListApi,
  cutStatusApi,
} from "@/api/permission/userinfo";
import AddUser from "./components/addUser";
export default {
  components: { AddUser },
  data () {
    return {
      options: [{
        value: '1',
        label: '全部'
      }, {
        value: '2',
        label: '启用'
      }, {
        value: '3',
        label: '禁用'
      },],
      value: '',
      http: "http://124.223.14.236:7005/",
      fromData: {
        username: "",
        status: '',
        email: "",
        page: 1,
        limit: 10,
      },
      totalNum: 0,
      list: [],
    };
  },
  created () {
    this.initData();
  },
  methods: {

    // 回显
    async edlFn (id) {
      // 回显数据
      const res = await showUserCheckListApi(id);
      this.$refs.AddUser.fromData = res;
      console.log(res);
      // 被显示多选check
      const res2 = await getUserCheckListApi();
      this.$refs.AddUser.checkList = res2.list;
      this.$refs.AddUser.dialogShow = true;
    },
    async delFn (id) {
      try {
        await this.$confirm("确定要删除吗");
      } catch (error) {
        return console.log(error);
      }
      await delUserListApi(id);
      this.initData();
      this.$message.success("删除成功");
    },
    async initData () {
      const res = await getUserListApi(
        this.fromData.username,
        this.fromData.status,
        this.fromData.email,
        this.fromData.page,
        this.fromData.limit
      );
      console.log(res);
      this.list = res.list;
      this.totalNum = res.total;
    },
    sizeChange (val) {
      console.log(val); //最新每页数量
      this.fromData.limit = val;
      this.initData();
    },
    currentChange (val) {
      console.log(val); //最新的页码值
      this.fromData.page = val;
      this.initData();
    },
    reset () {
      this.fromData.page = 1
      this.fromData.username = ''
      this.fromData.email = ''
      this.initData()
    },
  },
};
</script>
<style scoped>